/**
 * Tabs 组件样式增强
 * 
 * 提供额外的样式定制和状态样式
 * 
 * 注意：所有样式使用公司定制的 tabsStyleTokens，
 * 而不是 antd 的默认 token，确保样式完全受控
 */

import { createStyles } from 'antd-style';
import { tabsThemeConfig, tabsStyleTokens } from '../../../themes/tabs';

/**
 * Tabs 样式 Hook
 * 
 * 提供企业级样式增强，包括：
 * - 状态样式优化（hover、active、selected、disabled）
 * - 自定义指示条效果
 * - 卡片样式增强
 * - RTL 支持
 * 
 * @example
 * ```tsx
 * const { styles, cx } = useTabsStyles();
 * 
 * <Tabs className={cx(styles.customTabs, className)} />
 * ```
 */
export const useTabsStyles = createStyles(({ token, css, prefixCls }) => ({
  /**
   * 基础样式增强
   * 主要用于移除底部横线，颜色由 ConfigProvider 统一管理
   */
  customTabs: css`
    // 移除底部横线（antd 原生不支持通过 token 控制）
    .ant-tabs-nav {
      &::before {
        border-bottom: none;
      }
    }
  `,
  
  /**
   * 卡片样式增强
   * antd 原生的 card 样式的额外定制
   */
  cardStyle: css`
    .ant-tabs-nav {
      &::before {
        border: none;
      }
    }
    
    .ant-tabs-tab {
      background: ${tabsStyleTokens.colorBgTransparent};
      border: 1px solid ${tabsStyleTokens.colorBgTransparent};
      border-radius: ${tabsStyleTokens.borderRadius}px ${tabsStyleTokens.borderRadius}px 0 0;
      
      // 悬浮状态背景
      &:hover {
        background: ${tabsStyleTokens.colorBgHover};
      }
      
      // 选中状态特殊处理
      &.ant-tabs-tab-active {
        background: ${tabsStyleTokens.colorCardBg};
        border-color: ${tabsStyleTokens.colorBorder};
        border-bottom-color: ${tabsStyleTokens.colorCardBg};
      }
      
      // 禁用状态背景
      &.ant-tabs-tab-disabled {
        background: ${tabsStyleTokens.colorBgDisabled};
      }
    }
  `,
  
  /**
   * 边框样式（antd 原生不支持）
   * 为每个 tab 添加边框，选中时填充背景色
   */
  borderStyle: css`
    .ant-tabs-tab {
      border: 1px solid ${tabsStyleTokens.colorBorder};
      border-radius: 15px;
      margin-inline-end: 8px;
      padding: 8px 16px;
      
      // 悬浮时边框颜色变化
      &:hover {
        border-color: ${tabsStyleTokens.colorItemHover};
      }
      
      // 选中状态：填充背景色和边框
      &.ant-tabs-tab-active {
        background: ${tabsStyleTokens.colorItemSelected};
        border-color: ${tabsStyleTokens.colorItemSelected};
        
        // 白色文字（因为背景是深色）
        .ant-tabs-tab-btn {
          color: ${tabsStyleTokens.colorTextLight};
        }
      }
      
      // 禁用状态背景
      &.ant-tabs-tab-disabled {
        border-color: ${tabsStyleTokens.colorBorder};
        background: ${tabsStyleTokens.colorBgDisabled};
      }
    }
    
    // 移除默认指示条
    .ant-tabs-ink-bar {
      display: none;
    }
  `,
  
  /**
   * 填充样式/胶囊样式（antd 原生不支持）
   * 类似 Segmented 组件的效果
   */
  filledStyle: css`
    background: ${tabsStyleTokens.colorFillBg};
    padding: 4px;
    border-radius: ${tabsStyleTokens.borderRadiusLG}px;
    
    .ant-tabs-nav {
      &::before {
        border: none;
      }
    }
    
    .ant-tabs-tab {
      border-radius: ${tabsStyleTokens.borderRadius}px;
      margin: 0;
      
      + .ant-tabs-tab {
        margin-inline-start: 4px;
      }
      
      // 悬浮状态背景
      &:hover {
        background: ${tabsStyleTokens.colorBgHover};
      }
      
      // 选中状态：白色背景 + 阴影
      &.ant-tabs-tab-active {
        background: ${tabsStyleTokens.colorFillActiveBg};
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      }
      
      // 禁用状态保持透明
      &.ant-tabs-tab-disabled {
        background: ${tabsStyleTokens.colorBgTransparent};
      }
    }
    
    // 移除默认指示条
    .ant-tabs-ink-bar {
      display: none;
    }
  `,
}));

